<template>
	<view>
		<view v-if="renderDom[0].type === 'telephone'" class="custom-message">
			<view class="custom-content" v-if="isMine">
				<text space="emsp" decode="true" class="custom-content-wenzi">对方在忙？是否需要平台电话通知对方回复 </text>
				<text class="custom-content-description"
					@tap.stop.prevent="openPhone">{{ renderDom[0].description }}</text>
			</view>
			<view class="custom-content" v-else>
				<text space="emsp" decode="true" class="custom-content-wenzi">10分钟内回复有利于顺利成单哦~ </text>
			</view>
			
		</view>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import {
		formateTime
	} from '@/utils/common.js';
	const app = getApp();
	export default {
		data() {
			return {
				renderDom: null,
			};
		},
		components: {},
		options: {
			styleIsolation: 'shared'
		},
		props: {
			message: {
				type: Object,
				default: () => {}
			},
			isMine: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			message: {
				handler: function(newVal) {
					this.setData({
						message: newVal,
						renderDom: this.parseCustom(newVal),
					});
				},
				immediate: true,
				deep: true,
			},
		},
		methods: {
			openPhone() {
				this.$emit("openPhone");
			},
			parseCustom(message) {
				if (message.payload.data === 'telephone') {
					const renderDom = [{
						type: 'telephone',
						name: 'custom',
						description: message.payload.description
					}];
					return renderDom;
				}
			}
		}
	};
</script>
<style lang="scss">
	.custom-message {
		width: 100%;
		margin: 16rpx 0;
	}

	.custom-content {
		text-align: center;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.custom-content-wenzi {
			font-size: 26rpx;
			font-weight: 400;
			color: #999B9B;
			line-height: 40rpx;
		}

		.custom-content-description {
			font-size: 26rpx;
			font-weight: 900;
			color: #396DE8;
			line-height: 40rpx;
		}
	}

</style>